<template>
  <!-- 右击菜单列表 -->
  <div v-if="contextMenuState.show" class="contextmenu bgc-white pointer bd-filt" :style="contextMenuStyle">
    <!-- 多选操作列表 -->
    <ul v-if="multiSelectIndex.length > 1" @mouseup.left="onMouseUp">
      <li class="menu-item" @mouseup.left="COMBINE_GROUP">组合</li>
      <li class="menu-item" @mouseup.left="STICKY_MULTIPLE">置顶</li>
      <li class="menu-item" @mouseup.left="BOTTOM_MULTIPLE">置底</li>
      <li class="menu-item" @mouseup.left="LAYERUP_MULTIPLE">上移一层</li>
      <li class="menu-item" @mouseup.left="LAYERDOWN_MULTIPLE">下移一层</li>
      <li class="menu-item" @mouseup.left="DELETE_MULTIPLE">删除</li>
    </ul>
    <!-- 组件操作列表 -->
    <ul v-else @mouseup.left="onMouseUp">
      <li v-show="isGroupComponent(activeComponent)" class="menu-item" @mouseup.left="SEPARATE_GROUP">拆分</li>
      <li v-show="!isLayeredComponent(activeComponent)" class="menu-item" @mouseup.left="LAYERED_COMPONENT">层叠</li>
      <!-- 边距 -->
      <li
        v-if="activeComponent && !(activeComponent.resize && isLayeredComponent(activeComponent))"
        class="menu-item"
        style="padding: 0"
      >
        <el-dropdown placement="right">
          <div style="padding: 6px 8px; font-size: 14px">间距</div>
          <el-dropdown-menu slot="dropdown" class="t-light">
            <div>
              上边距：<el-input-number
                v-model="activeComponent.style.paddingTop"
                :step="1"
                step-strictly
                :min="0"
                :max="999"
                :controls="false"
                class="mr-10"
                size="mini"
              />下边距：<el-input-number
                v-model="activeComponent.style.paddingBottom"
                :step="1"
                step-strictly
                :min="0"
                :max="999"
                :controls="false"
                size="mini"
              />
            </div>
            <div class="mt-6">
              左边距：<el-input-number
                v-model="activeComponent.style.paddingLeft"
                :step="1"
                step-strictly
                :min="0"
                :max="999"
                :controls="false"
                class="mr-10"
                size="mini"
              />右边距：<el-input-number
                v-model="activeComponent.style.paddingRight"
                :step="1"
                step-strictly
                :min="0"
                :max="999"
                :controls="false"
                size="mini"
              />
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
      <li class="menu-item" @mouseup.left="STICKY_COMPONENT()">置顶</li>
      <li class="menu-item" @mouseup.left="BOTTOM_COMPONENT()">置底</li>
      <li class="menu-item" @mouseup.left="LAYERUP_COMPONENT()">上移一层</li>
      <li class="menu-item" @mouseup.left="LAYERDOWN_COMPONENT()">下移一层</li>
      <li v-show="!isLayeredComponent(activeComponent)" class="menu-item" @mouseup.left="MOVEUP_COMPONENT">上移组件</li>
      <li v-show="!isLayeredComponent(activeComponent)" class="menu-item" @mouseup.left="MOVEDOWN_COMPONENT">
        下移组件
      </li>
      <li v-show="isLayeredComponent(activeComponent)" class="menu-item" @mouseup.left="LAYERED_COMPONENT">取消层叠</li>
      <li class="menu-item" @mouseup.left="COPY_COMPONENT">复制</li>
      <li class="menu-item" @mouseup.left="DELETE_COMPONENT()">删除</li>
    </ul>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex';

  export default {
    computed: {
      ...mapGetters('component', [
        'componentData',
        'contextMenuState',
        'activeComponent',
        'isLayeredComponent',
        'multiSelectIndex',
        'scaleRatio'
      ]),
      contextMenuStyle() {
        const top = this.contextMenuState.top + 'px';
        const left = this.contextMenuState.left + 'px';
        const transform = `scale(${1 / this.scaleRatio})`;
        return { top, left, transform };
      }
    },

    methods: {
      ...mapMutations('component', [
        'STICKY_COMPONENT',
        'BOTTOM_COMPONENT',
        'MOVEUP_COMPONENT',
        'MOVEDOWN_COMPONENT',
        'LAYERUP_COMPONENT',
        'LAYERDOWN_COMPONENT',
        'COPY_COMPONENT',
        'LAYERED_COMPONENT',
        'DELETE_COMPONENT',
        'SET_COMPONENTCLICK',
        'COMBINE_GROUP',
        'SEPARATE_GROUP',
        'HIDE_CONTEXTMENU',
        'DEPRESS_COMPONENT',
        'RECORD_SNAPSHOT'
      ]),
      isGroupComponent(widget) {
        return widget?.component === 'Group';
      },

      onMouseUp() {
        this.SET_COMPONENTCLICK(true);
        this.HIDE_CONTEXTMENU();
      },

      // 多选置顶
      STICKY_MULTIPLE() {
        this.multiSelectIndex.forEach((index) => this.STICKY_COMPONENT(index));
        this.RECORD_SNAPSHOT();
      },
      // 多选置底
      BOTTOM_MULTIPLE() {
        this.multiSelectIndex.forEach((index) => this.BOTTOM_COMPONENT(index));
        this.RECORD_SNAPSHOT();
      },
      // 多选上移一层
      LAYERUP_MULTIPLE() {
        this.multiSelectIndex.forEach((index) => this.LAYERUP_COMPONENT(index));
        this.RECORD_SNAPSHOT();
      },
      // 多选下移一层
      LAYERDOWN_MULTIPLE() {
        this.multiSelectIndex.forEach((index) => this.LAYERDOWN_COMPONENT(index));
        this.RECORD_SNAPSHOT();
      },
      // 多选删除
      DELETE_MULTIPLE() {
        const list = this.componentData.filter((widget, i) => !this.multiSelectIndex.includes(i));
        this.componentData.splice(0, this.componentData.length, ...list);
        this.DEPRESS_COMPONENT();
        this.RECORD_SNAPSHOT();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .contextmenu {
    position: absolute;
    z-index: 1000;
    border: 1px solid map-get($bdColors, 'grey');
    width: 80px;
    font-size: 14px;
    transform-origin: top left;

    .menu-item {
      padding: 6px 8px;
      text-align: center;
      color: map-get($colors, 'light');
      transition: all 0.2s;

      &:hover {
        color: map-get($colors, 'theme');
        background-color: map-get($bgColors, 'lightgrey');
      }
    }
  }

  .el-dropdown-menu {
    padding: 10px;
    font-size: 12px;

    .el-input-number {
      width: 72px;
    }
  }

  ::v-deep {
    .el-dropdown {
      width: 100%;
      color: inherit;
    }
  }
</style>
